﻿
@{
    ViewData["Title"] = "ModuleMenus";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}

@section header{
    <style>
        .handle-box {
            margin-bottom: 20px;
        }

        .handle-select {
            width: 120px;
        }

        .handle-input {
            width: 300px;
            display: inline-block;
        }

        .table {
            width: 100%;
            font-size: 14px;
        }

        .red {
            color: #ff0000;
        }

        .mr10 {
            margin-right: 10px;
        }

        .table-td-thumb {
            display: block;
            margin: auto;
            width: 40px;
            height: 40px;
        }

        /*表单*/
        .el-form-item {
            width: 23%
        }

        .el-dialog__header {
            background-color: rgb(51, 51, 51);
        }

        .el-dialog__title {
            color: antiquewhite
        }

        .bootstrap-elem-field {
            margin-bottom: 10px;
            padding: 0;
            padding-top: 10px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }

            .bootstrap-elem-field legend {
                margin-left: 20px;
                padding: 0 10px;
                font-size: 16px;
                font-weight: 300;
                border-bottom: none;
                width: auto;
            }

        .bootstrap-field-box {
            padding: 10px 15px;
        }

        .el-table__body tr.current-row > td {
            background-color: #f5dc6f !important;
        }
    </style>
}

<div id="app" v-cloak>
    <div id='wrapper'>
        <div class="container">

            <el-card class="box-card" style="margin-bottom:10px;">
                <div slot="header" class="clearfix">
                    <i class="el-icon-s-order">分销商列表</i>
                </div>

                <div class="handle-box">

                    <el-button type="warning" icon="el-icon-delete" v-on:click='handleBan("0")' class="handle-del mr10">封禁</el-button>
                    <el-button type="primary" icon="el-icon-plus" v-on:click='handleBan("10")' class="handle-del mr10">解封</el-button>
                    <el-button type="danger" icon="el-icon-edit" v-on:click='handleBalance' class="handle-del mr10">余额修改</el-button>
                    <el-select placeholder="分销商状态" v-model="queryModel.status">
                        <el-option label="正常" :value="10"></el-option>
                        <el-option label="封禁" :value="0"></el-option>
                    </el-select>

                    <el-input v-model="queryModel.agentInfo" class='handle-input mr10' placeholder="请输入分销商信息"></el-input>

                    <el-button type="primary" icon="el-icon-search" v-on:click="handleSearch">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh-left" v-on:click="handleReset">重置</el-button>

                </div>

                <el-table v-loading="loading" v-on:selection-change="handleSelectionChange" v-on:current-change="handleCurrentRowChange" :data="tableData" style="margin-bottom: 20px;"
                          highlight-current-row row-key="id" border>
                    <el-table-column type="selection" sortable width="55">
                    </el-table-column>
                    <el-table-column prop="agentCode" label="分销商账号">
                    </el-table-column>
                    <el-table-column prop="agentName" label="分销商名称">
                    </el-table-column>
                    <el-table-column prop="accountBalance" label="账户余额">
                    </el-table-column>
                    <el-table-column prop="lockBalance" label="锁定余额">
                    </el-table-column>
                    <el-table-column prop="createdTime" label="注册时间">
                    </el-table-column>
                    <el-table-column prop="loginCount" label="登陆次数">
                    </el-table-column>
                    <el-table-column prop="province" label="省份">
                    </el-table-column>
                    <el-table-column prop="city" label="城市">
                    </el-table-column><el-table-column prop="status" label="分销商状态">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.status==0" type="danger">封禁</el-tag>
                            <el-tag v-show="scope.row.status==10" type="success">正常</el-tag>
                        </template>
                    </el-table-column>

                </el-table>


                <div class="pagination" style="text-align: center;">
                    <el-pagination background v-on:current-change="handleCurrentChange" v-on:size-change='handleSizeChange' :current-page.sync="queryModel.pageModel.page" :page-sizes="[10, 20, 50, 80]"
                                   :page-size.sync="queryModel.pageModel.rows" layout="total,sizes, prev, pager, next" :total="total">
                    </el-pagination>

                </div>


            </el-card>

            <!-- 审核弹出框 -->
            <el-dialog :title="formModel.title" :visible.sync="formModel.visible" width="85%">
                <el-form :inline="true" :rules="rules" ref="formMain" :model="formModel.model" label-width="85px" size="mini">
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5">
                        <legend>余额修改</legend>
                        <el-form-item label="分销商账号" prop="agentCode">
                            <el-input v-model="formModel.model.agentCode" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="分销商名称" prop="agentName">
                            <el-input v-model="formModel.model.agentName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="锁定余额" prop="lockBalance">
                            <el-input v-model="formModel.model.lockBalance" oninput="value=value.replace(/[^\d.]/g,'')" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="余额" prop="accountBalance">
                            <el-input v-model="formModel.model.accountBalance" oninput="value=value.replace(/[^\d.]/g,'')" clearable></el-input>
                        </el-form-item>

                    </fieldset>
                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button v-on:click="formModel.visible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="saveUpdate">确 定</el-button>
                </span>
            </el-dialog>
        </div>

    </div>
</div>

@section footer{
    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: function () {
                return {
                    loading: false,
                    queryModel: {
                        status:"",
                        agentInfo: "",
                        pageModel: {
                            page: 1,
                            rows: 10
                        }
                    },
                    id:"",
                    tableChecked: [],
                    tableData: [],
                    tableCurrentRow:null,
                    total: 0,
                    viewVisible: false,
                    formModel: {
                        visible: false,
                        title: "",
                        view: "",
                        model: {
                            id: "",
                            agentCode: "",
                            agentName:"",
                            accountBalance: 0,
                            lockBalance: 0
                        }
                    },
                    rules: {
                        accountBalance: [
                            { required: true, type: 'string', trigger: 'blur', message: '余额不能为空' },
                            { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }
                        ],
                        lockBalance: [
                            { required: true, type: 'string', trigger: 'blur', message: '锁定余额不能为空' },
                            { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }
                        ]
                    },
                }
            },
            created() {
                var that = this;
                //this.queryModel.status = "-1";
                this.getDatas();
            },
            methods: {
                getDatas: function () {
                    var that = this;
                    that.loading = true;
                    request.post("/biz/agentinfo/query", that.queryModel).then(function (res) {
                        console.log(res.data);
                        that.tableData = res.data.data.rows;
                        that.total = res.data.data.total;
                        that.loading = false;
                    });
                },
                
                handleView: function (index, row) {
                    this.viewModel = row;
                    this.viewVisible = true;
                },
                handleSelectionChange: function (val) {
                    this.tableChecked = val;
                },
                handleCurrentChange: function (index) {
                    this.queryModel.pageModel.page = index;
                    this.getDatas();
                },
                handleSizeChange: function () {
                    this.getDatas();

                },
                handleSearch: function () {
                    this.getDatas();

                },
                handleCurrentRowChange: function (nowVal, oldVal) {
                    this.tableCurrentRow = nowVal;
                    this.itemId = nowVal.itemId;
                },
                handleBan: function (status) {
                    var that = this;
                    var title = "解封";
                    if (status == "0") {
                        title = "封禁"
                    }  
                    if (this.tableChecked.length == 0) {
                        this.$message.warning("请选取要"+title+"的分销商记录！");
                        return;
                    }
                    var ids = "";
                    for (var i = 0; i < that.tableChecked.length; i++) {
                        ids += ","+that.tableChecked[i].id
                    }
                    ids = ids.substring(1);
                    
                    this.$confirm('确定对所选分销商记录进行【'+title+'】操作吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        request.put("biz/agentinfo/updateStatus?ids=" + ids + "&status=" + status).then(function (res) {
                            if (res.data.code == 1) {
                                that.$message.success(res.data.msg);
                            } else {
                                that.$message.warning(res.data.msg);
                            }
                            that.getDatas();
                        });

                    });
                },
                handleBalance: function () {
                    var that = this;
                    var row = null;
                    if (this.tableChecked.length == 0) {
                        return this.$message.warning("请选择分销商信息！");
                    } else if (this.tableChecked.length == 1) {
                        row = this.tableChecked[0];
                    } else if (this.tableChecked.length > 1) {
                        return this.$message.warning("一次只能选一条分销商信息进行编辑！");
                    }
                    var obj = JSON.parse(JSON.stringify(row));
                        
                    this.formModel = {
                        visible: true,
                        //view: type,
                        title: "余额修改",
                        model: obj
                    };
                },
                saveUpdate: function () {
                    var that = this;
                    this.$confirm('请核对修改的余额，确定提交修改吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.post("/biz/agentinfo/updateBalance", that.formModel.model).then(function (res) {
                            if (res.data.code == 1) {
                                that.$message.success(res.data.msg);
                            } else {
                                that.$message.warning(res.data.msg);
                            }
                            that.formModel.visible = false;
                            that.getDatas();
                        });
                    });
                },
                handleReset: function () {
                    this.queryModel.status = "";
                    this.queryModel.agentInfo = "";
                    this.getDatas();
                },
                
            }

        });

    </script>

}